<template>
    <div class="container">
        <!--头部菜单-->
        <div class="top">
            <div class="left">
                <a @click="routerback"><img src="../assets/img/back.png"><span>返回</span></a>
            </div>
            <div class="right">
                <span>目录</span>
            </div>
            <div class="right">
                <router-link to="/index" ><span>书城</span><img src="../assets/img/home.png"></router-link>
            </div>
        </div>
        <div class="center">
            <div class="center_top">
                <div class="total">共{{num}}章</div>
            </div>
            <!--章节显示-->
            <div class="center_chapter">
                <router-link v-for="chapters in chapter" :key="chapters.ID" :to="{path:'/read',query:{id:id,chapter_Index:chapters.Index}}" >
                    <div>{{chapters.Title}}</div>
                    <i v-if="chapters.Index>vip_chapter" class="iconfont icon-Czhuanshi"></i>
                </router-link>
            </div>
        </div>
        <!--章节换页-->
        <div class="bottom">
            <div>
                <div class="shang" @click="previous_page">上一页</div>
                <div>
                    <select v-model="option" @change="selsect">
                        <option v-for="(paginations,index) in pagination" :key="index" :value="paginations">{{paginations}}/{{sel_num}}</option>
                    </select>
                </div>
                <div class="xia" @click="next_page">下一页</div>
            </div>
        </div>
    </div>
</template>

<script>
    export default {
        name: "catalog",
        data(){
            return{
                id:this.$route.query.id,
                num: 0,
                vip_chapter:this.$route.query.vip_chapter,
                chapter:[],//目录列表
                pagination:[],//页码
                sel_num:'',
                option:1,
                offset:0,
            }
        },
        created:function () {
            document.title='目录';
            this.http();
            this.set();
            this.sum();
        },
        methods:{
            //子组件传值
            set:function(){
                this.$emit('set','hide');
            },
            //返回上一个页面
            routerback: function () {
                this.$router.back(-1);
            },
            //章节总数
            sum:function(){
                this.$axios.get("/count-chapters",{params: {BookID:this.id}}).then(response=>{
                    if(response){
                        this.num=response.data.total;
                        //根据章节数量填充select的option
                        this.sel_num=Math.ceil(this.num/20);
                        for (let i=0,ln=this.sel_num-1;i<=ln;i++) {
                            this.pagination[i]=i+1
                        }
                    }
                })
            },
            //当select的值改变时
            selsect:function(){
                let self=this;
                self.offset=(self.option-1)*20;
                self.http()
            },
            //返回目录的上一页
            previous_page:function(){
                let self=this;
                if(self.option>1){
                    self.option=self.option-1;
                    self.offset=(self.option-1)*20;
                    if(self.offset>=0){
                        self.http()
                    }
                }
            },
            //返回目录的下一页
            next_page:function(){
                let self=this;
                if(self.option<self.sel_num){
                    self.option=self.option+1;
                    self.offset=(self.option-1)*20;
                    if(self.offset<=self.sel_num*20){
                        self.http()
                    }
                }
            },
            //请求目录
            http:function(){
                this.$axios.get('/chapters',{params:{BookID:this.id,Limit:20,Offset:this.offset}}).then(response=>{
                    this.chapter=response.data.chapters
                })
            }
        }
    }
</script>

<style scoped>
    .container {
        background: white;
        margin-bottom: 10px;
        padding: 0px;
        font-size: 18px;
    }
    .top {
        margin-bottom: 15px;
        padding: 10px 0px;
        display: flex;
        flex-wrap: wrap;
        justify-content: space-between;
        align-items: center;
        background: #ebebeb;
    }

    .left a {
        display: flex;
        flex-wrap: wrap;
        justify-content: center;
        align-items: center;
    }

    .right a {
        display: flex;
        flex-wrap: wrap;
        justify-content: center;
        align-items: center;
    }

    .left a,
    .right a {
        color: black;
        text-decoration: none;
    }

    .top img {
        width: 2rem;
    }
    .center_top{
        display: flex;
        justify-content: space-between;
        padding: 0px 15px 10px;
        border-bottom:1px solid #DDDDDD ;
    }
    .center_top div:nth-child(1){
        color: #C1C1C1;
    }
    .center_top div:nth-child(2){
        color: red;
    }
    .center_chapter{
        margin-bottom: 50px;
    }
    .center_chapter a{
        padding: 8px 15px;
        border-bottom: 1px solid #DDDDDD;
        display: flex;
        justify-content: space-between;
        align-items: center;
        color: #282828;
        text-decoration: none;
    }
    .center_chapter a div{
        padding: 7px 0px;
    }
    .center_chapter img{
        width: 1.5rem;
        height: 1.5rem;
    }
    .bottom{
        position: fixed;
        width: 100%;
        bottom: 0px;
        background: #ebebeb;
        font-size: 0.9rem;
    }
    .bottom>div{
        display: flex;
        justify-content: space-between;
        align-items: center;
        padding: 15px 20px;
        border-top: 1px solid #ddd;
    }
    .bottom select{
        border: none;
        color: red;
        outline: none;
        font-size: 1rem;
        text-align-last:center
    }
    .iconfont{
        color: #ff69b4;
        font-size: 24px !important;
    }
</style>
